The screen to the right is an example of the BCS GUI program.
For this program, the upper 2/3 of the screen is referred to as the canvas, and the lower 1/3, the tabs panel.
The application is optimized for 1080P screens, but can be used at other resolutions. Make certain your browser zoom level provides pixels in whole numbers. ie. with a 4K screen, if your windows scaling is set 150%, set your browser zoom level to 133%. If windows scaling is set to 100%, set your browser zoom level to 200%. This will allow the best display quality.
The canvas does not scale with screen resolution (Only with browser zoom level). The example brewery from the options tab panel was drawn on a 1080p screen, and thus will only display properly on such. Draw your brewery at the resolution/zoom level you intend to use.
This application does not alter any of the programming in the BCS. (With the exception of the Program Tab - Save state/process)
The BCS and Program tab require current information from the BCS in order to function properly and thus are disabled until successfull communication with the BCS has been established and process/state information downloaded. The Options tab and Palette tab do not require a connected BCS to function.
All communications with the BCS will be signalled by a green/red dot in the tab doing the BCS communication. A green dot will indicate the successful receipt of information while a red dot will indicate a problem with communication. Unsuccessfull communication will be tried again ten times, before further attempts are abandoned.
The Tabs panel can be dragged to any position vertically or horizontally on the screen to create a larger area to display your brewery, though it will always be anchored to the right of the screen.
This app has been tested in Firefox and Chrome, proper functionality in other browsers are unknown. Firefox is recommended as it gives slightly better graphics quality and performance than Chrome.
Long runtimes in Chrome with complex breweries have created lag in the browser. The reason for this is still not clear, but Firefox does not suffer from this and thus Firefox is the recommended browser.
The Tabs Panel contains 5 tabs:
BCS:
Communicates with the BCS every second and updates the canvas to show the current status of the brewery. This is the tab to be in when running your brewery.
Palette:
This tab allows drawing of the brewery on the canvas.
Options:
This tab allows basic setup options for the program.
Program:
This tab allows the programming of the BCS as an alternative to the native BCS program editor.
Help:
Opens a new browser tab with this information.
Keyboard:
Hovering over this tab displays keyboard functions
>:
Clicking this tab maximizes/minimizes the tab panel
This is where whatever the BCS is doing will be represented on screen.
The BCS will be queried once per second while this tab is open.
Other than the initial download of initialization information, communication with the BCS will be active only when this tab is open.
Exit condition information, process, state, timer, temp probe, din, and output names are only loaded when BCS communication is first initialized. If any of these are changed after initialization, the app will need to be refreshed to reflect the changes. (CTRL-F5)
The BCS will be queried once per second and update the following:
As this tab represents what the BCS is doing, if communication with the BCS is lost, no updates to this page will take place.
The interface has tried to borrow the behavior of the BCS interface. Clicking on a process will toggle that process on/off. Clicking on a state will cause that state to become the running state for that process. Colours are as the BCS interface.
Clicking on output objects will manually toggle their state under the following conditions:
The canvas displays the currently loaded brewery and current state of the outputs/Dins of the BCS
Interaction with the canvas in the BCS tab is limited to clicking objects to toggle outputs and clicking the Stop and Pause objects.
BCS processes will be green if running.
Clicking a process will toggle it on/off
Clicking the ALL STOP will terminate all running processes and close all outputs.
All running processes will be displayed to the right of the Process group.
Running states will be highlighted in green.
States can be clicked on to change the active state.
If enough processes are running to extend past the right of the screen, a scroll bar will appear at the bottom of the palette.
If more than one process is running, processes can be placed in the desired display order by clicking on the process name and dragging the process.
Information contained with the process window:
Process name (click to drag window)
Pause button (click to pause/unpause)
State names (click to run state)
Timers (click to drag window)
Exit conditions (click to drag window)
Notes for active state (click to drag window)
If more processes are running than will fit on the screen, a scrollbar will appear in order to allow viewing of all processes.
This is where you create a graphical representation of your brewery.
All objects in the lower palette can be dragged and dropped anywhere on the canvas.
Right click on an object to display options particular to that object.
The state of the checkboxes on the right side of the palette are saved with the canvas.
Double red circles on objects are to denote the beginning and ending of plumbing lines. The inner circles need to touch each other in order for liquid flow to be animated.
Dragging either end of a plain line or the corner end of a corner line will cause the line's length and/or angle to change.
If the output or DIN property is left blank in the objects options, no communication with the bcs will take place for that object. All other aspects of the object will be functional.
Image objects can only have a URL as their source. Browser security prevents loading local images. Allowable formats include PNG, JPG, GIF (including animated GIFs), SVG, BMP
The program tries to keep all objects within the canvas. Currently objects can be rotated outside the canvas. This has no effect on the operation of the program other than making the object partially undisplayed. Rotate/drag again to bring back within the canvas.
Disabling animation may improve frame rate/lag issues on slower computers.
Highlighting images can help find images or text that 'disappeared'. This may happen due to sizing an image too small, having a text object with no text and/or transparent/white text/background.
Line animation is based upon a source of pressure. Pressure can only come from a pump turned on or a line with it's 'H2O source' property set.
Pumps and Line pressure sources are directionally sensitive. Orient the pump or line in the direction of flow for proper animation. No other plumbing is direction sensitive.
Avoid loops in your plumbing. This can cause the program to take a long time to calculate and display the animation. Loops also include plumbing that is duplicated on top of each other.
Text objects are configurable with most of the properties that HTML elements can be with CSS. They can also be configured to change on a DIN or output change.
Text objects are not required to contain text. The text property can be blank and the formatting used to create simple shapes with colors and borders to use on the canvas.
Entering an output number will cause the text object to change to its "on" values when the Output is on.
Entering an DIN number will cause the text object to change to its "on" values when the DIN is on.
Entering a negative DIN or output number will cause the object to change to its "off" value when "on" and its "on" value when "off".
Temperature objects are also configurable with the same formatting as Text objects.
An explanation of text format properties and syntax:
There is no error checking on any of the text formatting properties. If the syntax is not correct, no errors are thrown and no change will take place. But upon a load from a saved file, the properties used will be the default properties.
If the effect you desire is not working, check the syntax of the property in question.
Some more information on formatting text objects:https://forum.embeddedcc.com/viewtopic.php?f=13&t=2943&start=40#p11711
An excellent online tool to help experiment with shaping borders:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator
All object movement will be in multiples of 5 pixels with this checkbox ticked.
Otherwise all movements are single pixels.
This does not affect the up, down, left, and right cursor movements. These are always in single pixels.
This only has an effect in the palette tab.
All line end object rotation will be in multiples of 45 degrees with this checkbox ticked.
Line end movement will still remain in intervals of 1 or 5 pixels.
This does not affect the rotation of objects with the period or comma key, which are always at 45 degress.
This only has an effect in the palette tab.
Line endpoints can be hidden to help better visualize plumbing.
This only has an effect in the palette tab.
The liquid (blue chevrons) within the plumbing can be hidden to help improve comupter performance.
This has an effect in all tabs.
The animation of the heaters and the liquid within the plumbing can be frozen to help improve computer performance.
This has an effect in all tabs.
The animation of the pumps can be frozen to help improve computer performance.
This has an effect in all tabs.
The degree symbol ("°") for the temperature object can be hidden.
This has an effect in all tabs.
Images and text without content, without contrasting colours, or with insufficient height/width can be effectively invisble on the canvas.
Images and text can be highlighted with a thick black border to identify all images and text.
This only has an effect in the palette tab.
All objects assigned a DIN or output value will have that value superimposed over the object.
Objects will not be clickable while this is displayed.
This only has an effect in the palette tab.
All temperature objects assigned to a probe will have that value superimposed over the object.
Objects will not be clickable while this is displayed.
This only has an effect in the palette tab.
An object used to represent a kettle
Object can be displayed or hidden depending on the state running.
An object used to display notes relative to the currently running state as saved in the 'Programs' tab.
An Output or Din can be set to change the notes based on the state of the Output or Din
Object can be displayed or hidden depending on the state running.
Text will always be contained within object border. If text extends beyond bottom of object a scroll bar will appear to allow viewing. Any text that would extend beyond the right side of the object will be displayed on the next line.
HTML tags can be used to help format the text.
Examples:
"text <b>bold>/b> not bold" produces:
"text bold not bold"
"text <u>underlined</u> not underlined" produces:
"text underlined not underlined"
explanation:
An object used to display an image
The image source can be any valid URL. Browser security prevents the loading of images stored locally.
An Output or Din can be set to change the image based on the state of the Output or Din
Object can be displayed or hidden depending on the state running.
An object used to display the temperature or setpoint of a probe.
Object can be displayed or hidden depending on the state running.
An object used to display text or simple shapes.
An Output or Din can be set to change the text object based on the state of the Output or Din
Object can be displayed or hidden depending on the state running.
Text will try to be contained within object borders. The enter key does not work to force a new line. Use the "<br>" as below to force a new line.
HTML tags can be used to help format the text.
Examples:
"text <b>bold>/b> not bold" produces:
"text bold not bold"
"text<br>text on new line" produces:
"text
text on new line"
"text <u>underlined</u> not underlined" produces:
"text underlined not underlined"
explanation:
An object used to represent a e-stop.
Clicking this button while in the 'BCS' tab will stop all processes and turn off all outputs.
Object can be displayed or hidden depending on the state running.
HTML tags can be used to help format the text.
Examples:
"text <b>bold>/b> not bold" produces:
"text bold not bold"
"text<br>text on new line" produces:
"text
text on new line"
"text <u>underlined</u> not underlined" produces:
"text underlined not underlined"
explanation:
An object used to represent a pause button.
If any process is paused, clicking this button will unpause all processes
If no process is paused, clicking this button will pause all processes
Object can be displayed or hidden depending on the state running.
HTML tags can be used to help format the text.
Examples:
"text <b>bold>/b> not bold" produces:
"text bold not bold"
"text<br>text on new line" produces:
"text
text on new line"
"text <u>underlined</u> not underlined" produces:
"text underlined not underlined"
explanation:
An object used to represent a heating element.
The electrical and gas heating elements are functionaly equivalent.
Object can be displayed or hidden depending on the state running.
An object used to display a timer.
Timer to display is set in the display states popup
Object can be displayed or hidden depending on the state running.
An object used to represent a simple on/off valve.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
An object used to represent a 3 way L-shaped valve.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
An object used to represent a 3 way T-shaped valve.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
An object used to represent a pump.
The centrifugal and lobe pumps are functionaly equivalent.
Water flow must be in the correct direction for animation to display correctly in the 'BCS' tab.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
An object used to represent plumbing lines.
Designed to enable plumbing lines to connect at 45° angles.
Objects layer may have to be moved up or down in order to have pluming walls display properly.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
An object used to represent a thermometer.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
An object used to represent a manual ball valve.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
An object used to represent plumbing lines.
Length can be changed by clicking and dragging on a line end.
H2O source can be 'set' to allow for the representation of water source for the animation of plumbing.
H2O source can be used to represent a water supply line always turned on or an outlet of a kettle which gravity drains.
Water flow must be in the correct direction for animation to display correctly when used as a H2O source.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
An object used to represent plumbing lines.
Length can be changed by clicking and dragging on the '90°' line end.
H2O source can be 'set' to allow for the representation of water source for the animation of plumbing.
H2O source can be used to represent a water supply line always turned on or an outlet of a kettle which gravity drains.
Water flow must be in the correct direction for animation to display correctly when used as a H2O source.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
An object used to represent plumbing lines.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
An object used to represent plumbing lines.
Plumbing objects cannot have their display states adjusted. They will be displayed in all states.
All options in the "On Text Format" popup will be in force when the output/din is on.
All options in the "Text Format" popup will be in force when the output/din is off.
Accepts same syntax as CSS color property (RGB values, hexadecimal values, HSL values, HWB values, color names.)
Accepts same syntax as CSS color property (RGB values, hexadecimal values, HSL values, HWB values, color names.)
Accepts same syntax as CSS font property (size followed by font-family are required as minimum)
Accepts same syntax as CSS text-align property (left, center, and right)
Accepts same syntax as CSS padding property
Accepts same syntax as CSS border property (width style color)
Accepts same syntax as CSS border-radius property
Height of text object in pixels
Width of text object in pixels
Assigning an output number to an object will allow the object to display the state of the corresponding output while in the BCS tab.
Assigning a negative ouput number will cause the object display the "On" state while the output is "Off" and visa versa.
Assigning no ouput and no Din number will cause the object to display "On" by default. If the object is clicked while in the BCS tab, the state of the object will toggle, but have no affect on the BCS.
An object can have an Output assigned, a Din assigned, or neither. An Output and Din cannot be assigned at the same time.
Assigning an Din number to an object will allow the object to display the state of the corresponding Din while in the BCS tab.
Assigning a negative Din number will cause the object to display the "On" state while the Din is "Off" and visa versa.
Assigning no ouput and no Din number will cause the object to display "On" by default. If the object is clicked while in the BCS tab, the state of the object will toggle, but have no affect on the BCS.
An object can have an Output assigned, a Din assigned, or neither. An Output and Din cannot be assigned at the same time.
Text to be displayed
A temperature object can either display the Temperature of the probe or the Setpoint of the probe
A temperature object can either display the Temperature of the probe or the Setpoint of the probe
Any non plumbing object can hidden on specified running states.
By default all objects are displayed in all runnning states.
Unselecting a checkbox will cause the object to be hidden when that state is running.
If there is a conflict of displayed states when two or more processes are running, the lower process number has priority.
Displayed states for Timer objects:
Timer objects have an extra column for the timer number to be displayed in that state.
Hovering over the Timer # checkbox will expand the displayed states to display rows for the timer number to display.
The timer # checkbox is not directly editable, but will display the timer number to be displayed.
If there is more than one timer number # selected for a single process, the Timer # will display a "-".
Line and Corner Line objects can be a source of pressure for plumbing.
If this checkbox is selected the line will always be a source of pressure.
Ensure the "Liquid" is flowing in the correct direction when this is selected.
A temperature object requires a probe number to display the correct temperature or setpoint
Any valid URL can be entered to retrieve the image object on loading the canvas
Browser security prevents loading local images.
Allowable formats include PNG, JPG, GIF (including animated GIFs), SVG, BMP
All options in the "Image Options" popup will be in force when the output/din is off.
All options in the "On Image Options" popup will be in force when the output/din is on.
There are three options for the image sizing.
AUTO:
The default sizing
The image will be sized the same as the original image.
If the image size will extend beyond the canvas edges, the size will be reduced to fit within the canvas.
Max:
The image will be enlarged to fit within the canvas edges.
PIXELS
The image will be sized as entered.
If the image would extend beyond the canvas edge, the size will be reduced to fit to the canvas edge.
Within the image size, the image can be tiled in four different ways:
Repeat
The image will be tiled both vertically and horizontally to fill the image size.
Repeat Horz.
The image will be tiled horizontally to fill the image size.
Repeat Vert.
The image will be tiled vertically to fill the image size.
No Repeat
The default tiling
The image will not be tiled and appear only as a single image.
The image can be scaled in five ways:
Auto
The default scaling
The image will be scaled as in the original image. If this scales the image outside of the image size, the image will be cropped.
Cover
The image will be scaled as large as possible without stretching the image. If the proportions of the image differ from the image size, it is cropped either vertically or horizontally so that no empty space remains.
Contain
The image will be scaled as large as possible without cropping or stretching the image.
Px
The image will be scaled to the entered dimensions. If this scales the image outside of the image size, the image will be cropped.
%
The image will be scaled to the percentage of the image size. If this scales the image outside of the image size (percentage greater than 100), the image will be cropped.
This is the first tab displayed upon loading the program.
When this tab first loads, BCS access is attempted and if successful, data is downloaded for use in the BCS and Program tabs.
The alarm sound is also loaded.
Once communication with the BCS/Alarm URL has been attempted no further communication will take place from this page until a new address for either is entered.
An example brewery can be downloaded here and loaded via the 'Load Canvas/Notes' button.
An example process can be downloaded here and restored to your BCS for a very simple demonstration of the GUI with the above example brewery.
Once a successfull BCS URL is entered the border will turn green.
Communication will be attempted for 3 minutes until further attempts are aborted.
The last successful BCS URL is saved to local storage and future page reloads will use this address when loading.
A green border only indicates that a successful connection to the BCS was established. If the connection is lost after successful connection, the border color will not indicate this.
The password is not saved from previous sessions and will be required to start communication with a password protected BCS.
The entered password will be remembered until the page is re-loaded or the browser tab closed.
A copy of your brewery can be saved to your computer.
Due to browser security, if the file name already exists, a new file will be created with an (x) after the filename. The browser will never save a file over another.
This save also saves a copy of the brewery in the local storage of your browser. When the page initially loads, it is this copy from the local browser storage that is loaded automatically.
Only the last save is kept in local storage.
The saved filename can be changed to any valid filename
Any previously saved canvas can be loaded from local storage
This will clear all objects from the canvas, allowing a clean start.
THERE IS NO UNDO FOR THIS.
A URL of 'default' will load the default alarm.
If a different sound is desired, enter a valid URL.
Browser security does not allow access to locally stored sound files.
Valid file formats are: MP3, WAV, OGG
A green border indicates an audio file has been successfully loaded.
The alarm file can be tested by clicking the preview button, the sound will repeat until the button is pressed again.
It is good practice to confirm this alarm is functioning properly at an adequate volume before starting a brew session.
The current running version.
Clicking will display a 'What's new' information window.
The canvas displays the currently loaded brewery, but no interaction is possible while in the Options tab.
This tab allows the programming of the BCS via the canvas without the need to use the native BCS interface for most programming.
This tab does not communicate with the BCS until save state or process is selected.
Selecting a process and state will show what the brewery is doing when that state is running.
Programming via the tabs panel is the same as through the native BCS app.
Objects which have had an output set in the tabs panel will have an output options window displayed when the cursor is over the object.
Output programming is done by clicking on the object or changing the output options in the popup when hovered over the object
If the output has been set to 8-17, only "Direct" and "Not Enabled" are options.
Clicking on objects which have had their outputs set in the tabs panel will toggle the output "On" and "Off" if previously set to "Direct" or "Not Enabled". If set to any other mode, clicking will have no affect.
The canvas displays the currently loaded brewery and the states the outputs will be in when the highlighted process/state is running.
Data is downloaded from the BCS when the BCS GUI app is first loaded. If there has been any changes to the BCS programming made outside of this app since the app was loaded, it should be reloaded to get up to date data.
The options window is displayed in the upper right corner and can be dragged if needed to be moved.
Text entered here will be displayed in the corresponding notes object when that process/state is running.
To enter notes:
Select the process/state for the desired note, and type the note in the notes field.
Continue to select process/states and enter notes.
Save Canvas/Notes when all notes have been entered.
These notes will have an immediate effect in the BCS tab, but will not be premanent unless the canvas is saved.
If more than one state is running with the displayed states for the notes object all selected, the lowest numbered process will be the displayed note.
The current process is highlighted in green.
Clicking a process will select that process as the current one and highlight it green.
Programming as per the native BCS UI
The Process names can be edited.
The current state is highlighted in green.
Clicking a state will select that state as the current one and highlight it green.
Programming as per the native BCS UI
The State names can be edited.
Programming as per the native BCS UI
Timer names can be edited.
Programming as per the native BCS UI
Programming as per the native BCS UI
Programming as per the native BCS UI
Programming as per the native BCS UI
This window can be dragged.
This will save the current state to the BCS.
This will write over the state currently in the BCS.
If any processes are currently running in the BCS, they will be stopped in order to perform the save.
This will save the current process to the BCS.
This will write over the process currently in the BCS.
If any processes are currently running in the BCS, they will be stopped in order to perform the save.
This will save the current canvas along with all entered notes.
This has the same function as saving in the "Options" tab, both will save the canvas and notes.
This will copy the current state to the clipboard for future pasting.
This will copy the current process and all states within to the clipboard for future pasting.
This will paste the state previous to the current state, to the current state.
If the current state is state 0, the last state of the previous process will be pasted.
This will paste the last state copied to the clipboard into the current state.
This will paste the last process copied to the clipboard into the current process.
This will reset the current state to the BCS default values.
This will reset the current process and all states within to the BCS default values.
This will reset ALL notes in all processes and states to "notes:".
This will reload all BCS data.
This will set the output mode
With the output mode set to "Enable", clickiing on the object will change the output mode to "Direct" and toggle the object on.
With the output mode set to "Direct", clicking the object will toggle the object on/off.
Clicking the object in the "Duty cycle", "Hysteresis", or "PID" mode will have no effect.
This will set the output to On or Off
This will set the outputs duty cycle
This will set the outputs associated probe
This will set the output to heating or cooling
This will set the outputs setpoint
This will set the outputs swing
The help tab opens a new browser tab with this information.
Hovering over the shortcuts tab will open a window displaying the available keyboard functions.
These keys are only functional while in the Palette tab.
With the exception of "a, z, esc, and delete", these keys are only functional while holding down the left mouse button on a selected object.
Clicking this tab will minimize or maximize the current tabs panel.
The panel can be dragged vertically or horizontally by clicking and dragging on any of the tabs.
The Palette, Options, and Program tab will always open to full browser width.
The BCS tab will always open to the last position the BCS tab was in. This position will also be saved in the saved canvas file.